import React, { useEffect, useState } from 'react';
import { AppstoreOutlined, DesktopOutlined, MailOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button, Menu } from 'antd';
import { useNavigate } from 'react-router-dom';


const ComMenu: React.FC = () => {
    type MenuItem = Required<MenuProps>['items'][number];
    // const menu = JSON.parse(localStorage.menu).rows.children
    const items: MenuItem[] = [
        {
            key: '/home',
            icon: <AppstoreOutlined />,
            label: '首页',
        },
        {
            key: '/home/server',
            icon: <DesktopOutlined />,
            label: '服务项目',
            children: [
                {
                    key: '/home/server/category',
                    label: '类别管理',
                },
                {
                    key: '/home/server/shopCategory',
                    label: '商户项目',
                },
                {
                    key: '/home/server/statistics',
                    label: '数据统计',
                },
                {
                    key: '/home/server/commission',
                    label: '抽成管理',
                },
            ]
        },
        {
            key: '/home/shop',
            icon: <MailOutlined />,
            label: '店铺管理',
            children: [
                {
                    key: '/home/shop/apply',
                    label: '店铺审核',
                },
                {
                    key: '/home/shop/complain',
                    label: '投诉管理',
                },
                {
                    key: '/home/shop/shop',
                    label: '门店管理',
                },
                {
                    key: '/home/shop/charge',
                    label: '电站审核',
                },
            ]
        },
        {
            key: '/home/product',
            icon: <MailOutlined />,
            label: '商品管理',
            children: [
                {
                    key: '/home/product/productType',
                    label: '商品类型管理',
                },
                {
                    key: '/home/product/product',
                    label: '商品管理',
                }
            ]
        },
    ]

    //转换属性
    // const checkMenu = (list: []): any => {
    //     return list.map((item: any) => {
    //         //有children的回调，回调函数中直到找到没有children的对象，如何将该对象放回到上一层的children中？，没有的加入对象，
    //         if (item.children) {
    //             return {
    //                 ...item,
    //                 label: item.title,
    //                 icon: '',
    //                 children: checkMenu(item.children)
    //             }
    //         } else {
    //             return {
    //                 ...item,
    //                 icon: '',
    //                 label: item.title,
    //             }
    //         }

    //     })
    // }

    const navigate = useNavigate()
    const goPage = (el: any) => {
        navigate(el.key)
    }
    return (
        <Menu
            defaultSelectedKeys={['/home']}
            defaultOpenKeys={['/home']}
            mode="inline"
            theme="dark"
            items={items}
            onClick={goPage}
        />
    );
};

export default ComMenu;